<div style="height: 0px; width: 0px;">

    <!--teo_upload_trigger-->
    <span id="teo_upload_trigger"></span>
    <div class="teo_upload_content">
	<div id="teo_upload_top">
	    <div id="teo_upload_top_left">Upload your own Artwork</div>
	    <div id="teo_upload_top_right">X</div>
	</div>
	<div class="teo_part_1">
	    You can upload and use your own Artwork <span class="teo_dark">free of charge!</span>
	</div>
	<div class="teo_part_2">
	    <span class="teo_darker">Supported File formats:</span><br/>
	    <span class="teo_darker2">JPEG, PNG, GIF, BMP <span class="teo_darker2">and</span> TIFF</span><br/><br/>
	    <span class="teo_darker">File sizes:</span><br/>
	    <span class="teo_darker2">Minimum:300KB / Maximum: 1.5 MB</span>
	</div>
	<div class="teo_part_3">Please confirm that you are the <span class="teo_dark">rightfull owner</span> of this Artwork before uploading!</div>

	<div id="teo_owner">Yes, I'm the rightfull owner of this Artwork<input id="teo_owner_radio" type="radio" value="selected"/></div>

	<div class="teo_buttons"><span id="teo_ut_cancel">Cancel</span><span id="teo_ut_upload">Upload</span></div>

	<div><input type="checkbox" id="teo_message_checkbox" value="selected"/><span>Don't show this message next time</span></div>
    </div>
    <!--end of teo_upload_trigger-->


    <!--teo_upload_trigger_step2-->
    <span id="teo_upload_trigger_step2"></span>
    <div class="teo_upload_content_step2">
	<input id="teo_ut_file_upload" type="file" name="teo_ut_file_upload"/>
	<button onclick="$('#teo_ut_file_uploadUploader').click();">test</button>
	<!--	<a href="javascript:$('#teo_ut_file_upload').uploadifyUpload();">Upload Files</a>
	<a href="javascript:$('#teo_ut_file_upload').uploadifyCancel($('.uploadifyQueueItem').first().attr('id').replace('teo_ut_file_upload',''))">Cancel File</a>-->
    </div>
    <!--end of teo_upload_trigger_step2-->



    <!--teo_upload_trigger_step3-->
    <span id="teo_upload_trigger_step3"></span>
    <div class="teo_upload_content_step3">
	
	<div id="teo_upload_top_2">
	    <div id="teo_upload_top_left_2">System Message</div>
	    <div id="teo_upload_top_right_2">X</div>
	</div>

	<div>
	    Choosing another design will replace the current one
	</div>
	<div>
	    If you wish to <span>keep this design</span>, you can save it in <span>Favs</span> or add it to the <span>Basket</span>
	</div>

	<div>
	    Save "My design 1" in favorites.
	</div>

	<div>
	    Nevermind saving this design
	</div>

	<div>
	    Add to Basket
	</div>


	<!--
	<div class="teo_part_1">
	    You can upload and use your own Artwork <span class="teo_dark">free of charge!</span>
	</div>
	<div class="teo_part_2">
	    <span class="teo_darker">Supported File formats:</span><br/>
	    <span class="teo_darker2">JPEG, PNG, GIF, BMP <span class="teo_darker2">and</span> TIFF</span><br/><br/>
	    <span class="teo_darker">File sizes:</span><br/>
	    <span class="teo_darker2">Minimum:300KB / Maximum: 1.5 MB</span>
	</div>
	<div class="teo_part_3">Please confirm that you are the <span class="teo_dark">rightfull owner</span> of this Artwork before uploading!</div>

	<div id="teo_owner">Yes, I'm the rightfull owner of this Artwork<input id="teo_owner_radio" type="radio" value="selected"/></div>

	<div class="teo_buttons"><span id="teo_ut_cancel">Cancel</span><span id="teo_ut_upload">Upload</span></div>
	-->
	<div><input type="checkbox" id="teo_message_checkbox_2" value="selected"/><span>Don't show this message next time</span></div>
    </div>
    <!--end of teo_upload_trigger_step3-->

</div>

{literal}
<script type="text/javascript">
    $(document).ready(function(){

	
	/*teo_upload_trigger*/
	$("#teo_upload_trigger").tooltip({
		opacity: 1,
		relative: false,
		predelay: 0,
		delay: 3600000,
		events: {
			def:     "click,mouseout",
			input:   "focus,blur",
			widget:  "focus mouseover,blur mouseout",
			tooltip: "mouseover,mouseenter"
		},
		position: "bottom center",
		offset:	[160, 630]
	});
	$('#teo_ut_cancel').click(function(){
	    $("#teo_upload_trigger").data('tooltip').hide();
	    $("#teo_upload_trigger_step2").data('tooltip').hide();
	    $("#teo_owner").css('color','#000');
	    teoUpdateCookie();
	});
	$('#teo_ut_upload').click(function(){
	    if( $("#teo_owner_radio:checked").val()=='selected'){
		$("#teo_upload_trigger").data('tooltip').hide();
		$("#teo_upload_trigger_step2").data('tooltip').hide();
		$("#teo_upload_trigger_step2").click();
	    }else{
		$("#teo_owner").css('color','red');
	    }
	    teoUpdateCookie();
	});
	function teoUpdateCookie(){
	    if( $("#teo_message_checkbox:checked").val()=='selected'){
		var date = new Date();
		var days = 1;
		date.setTime(date.getTime()+(days*24*60*60*1000));
		setCookie("skinshop_own_artwork_message", true, date, "/");
	    }
	}
	$('#teo_upload_top_right').click(function(){
	    $('#teo_upload_trigger').data('tooltip').hide();
	});
	$(".teo_upload_content").draggable();
	/*end of teo_upload_trigger*/



	/*teo_upload_trigger_step2*/
	$("#teo_upload_trigger_step2").tooltip({
		opacity: 1,
		relative: false,
		predelay: 0,
		delay: 3600000,
		events: {
			def:     "click,mouseout",
			input:   "focus,blur",
			widget:  "focus mouseover,blur mouseout",
			tooltip: "mouseover,mouseenter"
		},
		position: "bottom center",
		offset:	[160, 630]
	});
	$('#teo_ut_file_upload').uploadify({
	    'uploader'  : '/public/scripts/uploadify.swf',
	    //'script'    : '/public/scripts/uploadify.php',
	    'script'    : '/upload/own-artwork',
	    'scriptData': {
		'destination' : {/literal}'{$ownArtworkUploadDestination}'{literal}
	    },
	    'cancelImg' : '/public/scripts/cancel.png',
	    'auto'      : true,
	    'method'	: 'post',
	    'multi'	: false,
	    'height'	: 40,
	    'onComplete': function(event, ID, fileObj, response, data) {

		var obj = jQuery.parseJSON(response);

		$('#'+imageTriggerId).html('');
		$('#'+imageTriggerId).attr('imageUrl', obj.path + obj.name );
		$('#'+imageTriggerId).css('background-image', 'url("'
		    +'/minigen.php?filepath='+obj.path+'&filename='+obj.name+'&width=80&height=60&ext='+obj.ext
		    +'")').css('cursor', 'pointer');

		$('#'+uploadTriggerId).html('DELETE');
		$('#'+uploadTriggerId).css('background-color', '#c71f1f');


		
		//alert(response);
		//$('#filesId').val(obj.filesId);
		//$("#uploadBox").html('<img src="/minigen.php?filepath='+obj.path+'&filename='+obj.name+'&width=215&height=215&ext='+obj.ext+'" alt="laptop"/>');
		//alert(response);
		$('#teo_upload_trigger_step2').data('tooltip').hide();
	    },
	    'onError'   : function (event,ID,fileObj,errorObj) {
		  alert(errorObj.type + ' Error: ' + errorObj.info);
	    },
	    buttonText	: 'Select artwork file',
	    hideButton	: false
	});
	//$(".teo_upload_content_step2").draggable();
	/*end of teo_upload_trigger_step2*/



	/*teo_upload_trigger_step3*/
	$("#teo_upload_trigger_step3").tooltip({
		opacity: 1,
		relative: false,
		predelay: 0,
		delay: 3600000,
		events: {
			def:     "click,mouseout",
			input:   "focus,blur",
			widget:  "focus mouseover,blur mouseout",
			tooltip: "mouseover,mouseenter"
		},
		position: "bottom center",
		offset:	[160, 630]
	});
//	$('#teo_ut_cancel').click(function(){
//	    $("#teo_upload_trigger").data('tooltip').hide();
//	    $("#teo_upload_trigger_step2").data('tooltip').hide();
//	    $("#teo_owner").css('color','#000');
//	    teoUpdateCookie();
//	});
//	$('#teo_ut_upload').click(function(){
//	    if( $("#teo_owner_radio:checked").val()=='selected'){
//		$("#teo_upload_trigger").data('tooltip').hide();
//		$("#teo_upload_trigger_step2").data('tooltip').hide();
//		$("#teo_upload_trigger_step2").click();
//	    }else{
//		$("#teo_owner").css('color','red');
//	    }
//	    teoUpdateCookie();
//	});
	function teoUpdateCookie(){
	    if( $("#teo_message_checkbox_2:checked").val()=='selected'){
		var date = new Date();
		var days = 1;
		date.setTime(date.getTime()+(days*24*60*60*1000));
	        setCookie("skinshop_own_artwork_message_step3", true, date, "/");
	    }
	}
    
	$('#teo_upload_top_right_2').click(function(){
	    $('#teo_upload_trigger_step3').data('tooltip').hide();
	});

	$(".teo_upload_content_step3").draggable();
	/*end of teo_upload_trigger_step3*/


	    
    });
</script>
{/literal}